<template>
  <div class='wrapper'>
    <div class='head'></div>
    <p class='title'>车辆检测评估报告
      <img src='../assets/image/gfcf.png' alt=''>
    </p>

    <div class='carInfo'>
      <div class='info_top'>
        <p>保时捷帕拉梅拉2010款Panamera4 3.6L</p>
        <div class='standard'>
          <p style='margin-bottom: 0'>国四</p>
          <p>排放标准</p>
        </div>
      </div>
      <div class='summarize_center'>

        <div class='sum_intro introduce' v-for='info in reportData.info'>
          <p><span>{{ info.name }}</span> <span>{{ info.key }}</span></p>
<!--          <p><span>{{  }}</span> <span>125.2万</span></p>-->
        </div>

        <!--        <div class='introduce'>-->
        <!--          <p><span>车身结构</span> <span>5门4座掀背式5门4座掀背式5门4座掀背式</span></p>-->
        <!--          <p><span>车身颜色</span> <span>白色</span></p>-->
        <!--          <p><span>能源类型</span> <span>汽油</span></p>-->
        <!--        </div>-->
        <!--        <div class='introduce'>-->
        <!--          <p><span>新车指导价</span> <span>125.2万</span></p>-->
        <!--          <p><span>生产日期</span> <span>2012年10月</span></p>-->
        <!--          <p><span>变速箱类型</span> <span>7档双离合</span></p>-->
        <!--        </div>-->
      </div>
      <div class='info_bottom'>
        <div class='picintro'>
          <div>
            <img src='../assets/image/2.png' alt=''>
            <p>外后视镜调节</p>
          </div>
          <div>
            <img src='../assets/image/3.png' alt=''>
            <p>后视镜折叠</p>
          </div>
          <div>
            <img src='../assets/image/4.png' alt=''>
            <p>座椅记忆</p>
          </div>
          <div>
            <img src='../assets/image/5.png' alt=''>
            <p>多功能方向盘</p>
          </div>
        </div>
        <div class='picintro'>
          <div>
            <img src='../assets/image/6.png' alt=''>
            <p>车大灯清洗</p>
          </div>
          <div>
            <img src='../assets/image/7.png' alt=''>
            <p>全景天窗</p>
          </div>
          <div>
            <img src='../assets/image/8.png' alt=''>
            <p>座椅调节</p>
          </div>
          <div>
            <img src='../assets/image/9.png' alt=''>
            <p>电动后备箱</p>
          </div>
        </div>
      </div>
    </div>

    <!--        <div class="carPic">-->
    <!--            <img src="" alt="">-->
    <!--        </div>-->

    <div class='carSummarize carInfo'>
      <div class='summarize_top'>
        <p>车况综述</p>
      </div>
      <div class='summarize_center'>
        <div class='introduce'>
          <p><span>车架号</span> <span>WP0AXXXXXXXXXX1234</span></p>
        </div>
        <div class='sum_intro introduce'>
          <p><span>表显里程</span> <span>10.00 万公里</span></p>
          <p><span>注册日期</span> <span>2020年12月11日</span></p>
        </div>
      </div>
      <div class='summarize_mid'>

      </div>
      <div class='picintro'>
        <div>
          <img src='../assets/image/10.png' alt=''>
          <p>排除水泡车</p>
        </div>
        <div>
          <img src='../assets/image/11.png' alt=''>
          <p>排除火烧车</p>
        </div>
        <div>
          <img src='../assets/image/12.png' alt=''>
          <p>排除事故车</p>
        </div>
        <div>
          <img src='../assets/image/13.png' alt=''>
          <p>非营运车辆</p>
        </div>
      </div>
    </div>

    <div class='carInsurance carInfo'>
      <div class='summarize_top'>
        <p>保险理赔记录</p>
      </div>
      <div class='insurance_center'>
        <div>
          <p>0</p>
          <p>水泡事故</p>
        </div>
        <div>
          <p>0</p>
          <p>火烧事故</p>
        </div>
        <div>
          <p>0</p>
          <p>碰撞事故</p>
        </div>
        <div>
          <p class='insurance_other'>21</p>
          <p>盗抢事故</p>
        </div>
      </div>
      <div class='insurance_bottom'>
        <div>
          <p>时间</p>
          <p>类型</p>
          <p>部位</p>
          <p>理赔金额（元）</p>
        </div>
        <div class='insurance_content'>
          <p>2010.12.26</p>
          <p class='insurance_type'>碰撞</p>
          <p>正前方</p>
          <p>8000</p>
        </div>
        <div class='insurance_content'>
          <p>2010.12.26</p>
          <p class='insurance_type'>碰撞</p>
          <p>中间右侧</p>
          <p>8000</p>
        </div>
        <div class='insurance_content'>
          <p>2010.12.26</p>
          <p class='insurance_type'>碰撞</p>
          <p>正前方</p>
          <p>8000</p>
        </div>
      </div>
    </div>

    <div class='carMaintain carInfo'>
      <div class='summarize_top'>
        <p>维修保养记录</p>
      </div>
      <div class='insurance_center'>
        <div>
          <p style='color: #3AB100'>1</p>
          <p>保养</p>
        </div>
        <div>
          <p style='color: #F9BE00'>1</p>
          <p>维修</p>
        </div>
        <div>
          <p>1</p>
          <p>其它</p>
        </div>
      </div>
      <div class='insurance_bottom'>
        <div class='maintain_content'>
          <p>时间</p>
          <p>类型</p>
          <p>项目</p>
        </div>
        <div class='maintain_content'>
          <p>2010.12.26</p>
          <p class='insurance_type'>碰撞</p>
          <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        </div>
        <div class='maintain_content'>
          <p>2010.12.26</p>
          <p class='insurance_type'>碰撞</p>
          <p>文字文字文字文字文字文字文字， 文字文字。 </p>
        </div>
        <div class='maintain_content'>
          <p>2010.12.26</p>
          <p class='insurance_type'>碰撞</p>
          <p>文字文字文字文字文字文字文字， 文字文字。 </p>
        </div>
      </div>
    </div>

    <div class='carCertificate carInfo'>
      <div class='summarize_top'>
        <p>证件手续</p>
      </div>
      <div class='summarize_center'>
        <div class='sum_intro introduce'>
          <p><span>所有人</span> <span>私户</span></p>
          <p><span>使用性质</span> <span>非营运</span></p>
        </div>
        <div class='sum_intro introduce'>
          <p><span>注册日期</span> <span>2012.01.01</span></p>
          <p><span>年检到期日</span> <span>2022.01.01</span></p>
        </div>
        <div class='sum_intro introduce'>
          <p><span>车辆库存地</span> <span>北京</span></p>
          <p><span>出厂日期</span> <span>2011.10.15</span></p>
        </div>
      </div>
    </div>

    <div class='carAppearance carInfo'>
      <div class='summarize_top'>
        <p>车辆外观</p>
      </div>
      <div class='summarize_center appear'>
        <div class='sum_intro introduce'>
          <p><span>水箱框架</span> <span>正常</span></p>
          <p><span>前防撞梁</span> <span>正常</span></p>
        </div>
        <div class='sum_intro introduce'>
          <p><span>右前纵梁</span> <span>正常</span></p>
          <p><span>右前翼子骨架</span> <span>正常</span></p>
        </div>
        <div class='sum_intro introduce'>
          <p><span>左前减震器支座</span> <span>正常</span></p>
          <p><span>防火墙隔热棉</span> <span>正常</span></p>
        </div>
        <div class='sum_intro introduce'>
          <p><span>防火墙</span> <span>正常</span></p>
          <p><span>发动机变速箱</span> <span>正常</span></p>
        </div>
      </div>
    </div>

    <div class='carAppearance carInfo'>
      <div class='summarize_top'>
        <p>车辆内饰</p>
      </div>
      <div class='summarize_center'>
        <div class='sum_intro introduce'>
          <p><span>水箱框架</span> <span>正常</span></p>
          <p><span>水箱框架</span> <span>正常</span></p>
        </div>
        <div class='sum_intro introduce'>
          <p><span>水箱框架</span> <span>正常</span></p>
          <p><span>水箱框架</span> <span>正常</span></p>
        </div>
      </div>
    </div>

    <div class='carAppearance carInfo'>
      <div class='summarize_top'>
        <p>发动机舱</p>
      </div>
      <div class='summarize_center'>
        <div class='sum_intro introduce'>
          <p><span>水箱框架</span> <span>正常</span></p>
          <p><span>水箱框架</span> <span>正常</span></p>
        </div>
        <div class='sum_intro introduce'>
          <p><span>水箱框架</span> <span>正常</span></p>
          <p><span>水箱框架</span> <span>正常</span></p>
        </div>
      </div>
    </div>

    <div class='carAppearance carInfo'>
      <div class='summarize_top'>
        <p>后备箱舱</p>
      </div>
      <div class='summarize_center'>
        <div class='sum_intro introduce'>
          <p><span>水箱框架</span> <span>正常</span></p>
          <p><span>水箱框架</span> <span>正常</span></p>
        </div>
        <div class='sum_intro introduce'>
          <p><span>水箱框架</span> <span>正常</span></p>
          <p><span>水箱框架</span> <span>正常</span></p>
        </div>
      </div>
    </div>

    <div class='carAppearance carInfo'>
      <div class='summarize_top'>
        <p>车辆底部</p>
      </div>
      <div class='summarize_center'>
        <div class='sum_intro introduce'>
          <p><span>水箱框架</span> <span>正常</span></p>
          <p><span>水箱框架</span> <span>正常</span></p>
        </div>
        <div class='sum_intro introduce'>
          <p><span>水箱框架</span> <span>正常</span></p>
          <p><span>水箱框架</span> <span>正常</span></p>
        </div>
      </div>
    </div>

  </div>
</template>
<script lang='ts'>
import { Operation, OriginalRows, Pagination, Props, recOperation, TableColumn } from 'src/components/models';
import { defineComponent, onBeforeMount, onMounted, reactive, ref } from 'vue';
import { postRequest, getRequest } from '../components/functions';
import { useStore } from 'src/store';
import { CarMessage, cartypeRelation } from 'src/store/sphinx/state';
import { useRoute, useRouter } from 'vue-router';

export default defineComponent({
  name: 'detectionReport',
  setup() {
    const store = useStore();
    const userData = store.state.sphinx.CarMessage;
    let reportData = ref({});

    onBeforeMount(() => {
      if (userData.report_data_url) {
        getRequest(userData.report_data_url, (res) => {
          reportData.value = res;
        });
      }
    });

    return {
      reportData
    };
  }
});
</script>
<style>
* {
  padding: 0;
  margin: 0;
}

li,
ul,
dl,
dt,
dd {
  list-style: none;
}

a {
  text-decoration: none;
}

html,
body {
  /*font-size: 5.33333vw;*/
  font-size: 100px;
  height: 100%;
  overflow-x: hidden;
  position: relative;
}

.wrapper {
  width: 95%;
  height: auto;
  margin: 0 auto;
}

.head {
  width: 100%;
  height: 0.6rem;
  background-color: #fabe00;
}

.wrapper .title {
  height: 1.5rem;
  line-height: 1.5rem;
  font-size: 0.6rem;
  text-align: center;
  position: relative;
}

.wrapper .title > img {
  width: 1.3rem;
  height: 1.13rem;
  position: absolute;
  left: 1rem;
}

.carInfo {
  width: 92%;
  height: auto;
  margin: 0 auto 0.5rem;
  padding: 0.3rem;
  background-color: #fefbf2;
  position: relative;
}

.info_top {
  display: flex;
  justify-content: space-around;
}

.info_top > p,
.summarize_top > p {
  font-size: 0.4rem;
}

.summarize_top > p {
  margin-left: 1.2rem;
}

.info_top > p::after,
.summarize_top > p::after {
  content: url("../assets/image/1.png");
  width: 0.47rem;
  height: 0.53rem;
  position: absolute;
  top: 0;
  left: 0.2rem;
}

.info_top .standard {
  width: 1.02rem;
  height: 0.79rem;
  font-size: 0.36rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  border-radius: 20px;
  background-color: #fffefc;
  color: #676665;
  border: 1px #000 solid;
  box-shadow: 5px 5px 5px #FABE00;
}

.standard p:nth-of-type(2) {
  font-size: 0.18rem;
}

.info_center {
  display: flex;
  justify-content: space-between;;
  font-size: 0.36rem;
  margin-top: 0.6rem;
}

.introduce, .appearance {
  color: #474747;
}

.introduce span:nth-of-type(2) {
  color: #000000;
}

.introduce span:nth-of-type(1) {
  width: 2.2rem;
  display: inline-block;
}

.appear div p span:nth-of-type(1) {
  width: 2.8rem;
  display: inline-block;
}

.appearance span:nth-of-type(1) {
  width: 3rem;
  display: inline-block;
}

.introduce p {
  margin-bottom: 0.2rem;
  display: flex;
}

.info_bottom {
  width: 70%;
  margin: 0.2rem auto 0;
  font-size: 0.3rem;
  color: #484848;
  display: flex;
  flex-direction: column;
}

.info_bottom div {
  text-align: center;
}

.picintro {
  display: flex;
}

.picintro div {
  width: 3rem;
  height: 2rem;
}

.carPic {
  width: 97%;
  height: 7.8rem;
  margin: 0 auto;
  background-color: #676665;
}

.summarize_center {
  margin-top: .5rem;
  font-size: .36rem;
}

.sum_intro {
  display: flex;
  justify-content: space-between;
}

.sum_intro p {
  width: 6rem;
}

.summarize_mid {
  width: 100%;
  height: 1rem;
  background: url("../assets/image/14.png") no-repeat center;
}

.carSummarize .picintro {
  font-size: .36rem;
  text-align: center;
  justify-content: space-around;
  margin-top: .5rem;
}

.insurance_center {
  color: #484848;
  display: flex;
}

.insurance_center > div {
  width: 5rem;
  height: 2rem;
  text-align: center;
  margin: .2rem 0 .3rem;
}

.insurance_center > div p:nth-of-type(1) {
  font-size: 1rem;
}

.insurance_center > div p:nth-of-type(2) {
  font-size: .36rem;
}

.insurance_bottom {
  font-size: .30rem;
  color: #000;
}

.insurance_bottom div:nth-of-type(1) {
  font-size: .36rem;
  color: #474747;
}

.insurance_bottom div {
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.insurance_bottom div p {
  width: 4rem;
}

.insurance_content, .maintain_content {
  height: auto;
  line-height: .5rem;
  margin-top: .2rem;
}

.insurance_type {
  width: 1rem;
  height: .5rem;
  background-color: #F9BE00;
  border-radius: 20px;
}

.insurance_other {
  color: #FABE00;
}

.maintain_content p:nth-of-type(3) {
  width: 10rem !important;
}

.appearance {
  color: #474747;
}
</style>